import React, { PureComponent } from "react";
import { actions } from "./store/";
import { connect } from "react-redux";

//页面组件
import Topic from "./components/Topic.jsx";
import List from "./components/List.jsx";
import Recommed from "./components/Recommed.jsx";
import Writer from "./components/Writer.jsx";

//样式组件
import { HomeWrapper, HomeLeft, HomeRight, BackTop } from "./style";

class Home extends PureComponent {
  
  
  handelScrollTop() {
    window.scrollTo(0, 0);
  }

  render() {
    return (
      <HomeWrapper>
        <HomeLeft>
          <img
            className="banner-img"
            src="http://i0.hdslb.com/bfs/article/5a219223033d41a7297b2e1e5ab7ff1363c927bb.jpg"
            alt=""
          />
          <Topic></Topic>
          <List></List>
        </HomeLeft>
        <HomeRight>
          <Recommed></Recommed>
          <Writer></Writer>
        </HomeRight>
        {this.props.showScroll ? (
          <BackTop onClick={this.handelScrollTop}>回到顶部</BackTop>
        ) : null}
      </HomeWrapper>
    );
  }

  componentDidMount() {
    this.props.changHomeData();
    this.bindEvents();
  }
  componentWillUnmount(){
    window.removeEventListener("scroll", this.props.changeScrollTopShow);
  }
  bindEvents() {
    window.addEventListener("scroll", this.props.changeScrollTopShow);
  }
}

const mapState = state => ({
  showScroll: state.getIn(["home", "showScroll"])
});

const mapDispatch = dispatch => ({
  changHomeData() {
    dispatch(actions.getHomeInfo());
  },
  changeScrollTopShow() {
    if (document.documentElement.scrollTop > 400) {
      dispatch(actions.toggleTopShow(true));
    } else {
      dispatch(actions.toggleTopShow(false));
    }
  }
});

export default connect(mapState, mapDispatch)(Home);
